<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container">
        <el-input
            clearable
            v-model="listQuery.workOrderNo"
            style="margin-right: 15px;"
            :style="{ width: inputWid(listQuery.workOrderNo) }"
            class="filter-item"
            placeholder="请输入工单单号"
        ></el-input>
        <!-- :style="searchInputStyle" -->
        <el-input
            clearable
            v-model="listQuery.order"
            style="margin-right: 15px;"
            :style="{ width: inputWid(listQuery.order) }"
            class="filter-item"
            placeholder="请输入计划批号"
        ></el-input>
        <!-- <el-date-picker
            v-model="dateOptions"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
        </el-date-picker> -->
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" max-height="700" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column label="工单单号"  prop="TA002" align="center" width="120px"/>
      <el-table-column label="产品品号"  prop="TA006" align="center" width="120px"/>
      <el-table-column label="材料品名"  prop="TB012" align="center" width="160px"/>
      <el-table-column label="材料规格"  prop="TB013" align="center"/>
      <el-table-column label="长（产品）"  prop="UDF51" align="center"/>
      <el-table-column label="宽（产品）"  prop="UDF52" align="center"/>
      <el-table-column label="工艺名称"  prop="MW002" align="center"/>
      <el-table-column label="材料品号"  prop="TB003" align="center"/>
      <el-table-column label="需领用量"  prop="TB004" align="center"/>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

  </div>
</template>

<script>
import { findRoughShapeCutting } from '../../api/processRoute'
export default {
    name: 'materialCutting',
    data () {
        return {
            listQuery: {},
            // order:'2206202305100010001'
            dateOptions: this.getNowTime(),
            searchInputStyle: 'width: 180px;margin-right:15px;',
            total: 0,                                      //数据的总数
            tableInfo: [],
            loadingList: false,
            loading: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            if(!this.listQuery.workOrderNo && !this.listQuery.order) return this.$message.error('工单单号、计划批号不能为空!')
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            let data = await findRoughShapeCutting(query)
            if(data.code == '1'){
              this.total = data.data.count
              this.tableInfo = data.data.list
            } else {
              this.$message.error(data.msg)
            }
            this.loadingList = false
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
              TA033: '计划批号',
              TA026: '订单单别',
              TA027: '订单单号',
              TA028: '订单序号',
              TA001: '工单单别',
              TA002: '工单单号',
              TA003: '开单日期',
              TA077: '根来源单号',
              MB002: '品名',
              MB003: '规格',
              TA015: '预计产量',
              TA017: '已生产量',
              TA006: '产品品号',
              TB012: '材料品名',
              TB013: '材料规格',
              UDF51: '长（产品）',
              UDF52: '宽（产品）',
              MW002: '工艺名称',
              TB003: '材料品号',
              TB004: '需领用量',
              TA011: '状态码',
              UDF03: '版本',
              MB110: '快捷码',
              MF003: '加工顺序',
              MF004: '工艺',
              TA0767778: '单据',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          console.log(props)
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          console.log(data)
          return { header, data }
        },
        // 导出excel
        async hExportExcel() {
          if(!this.listQuery.workOrderNo && !this.listQuery.order) return this.$message.error('工单单号、计划批号不能为空!')
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.limit = 10000
          let arr = await findRoughShapeCutting(query)
          if(arr.code != '1') return  this.$message.error(arr.msg)
          const { header, data } = this.transformDat(this.setSort(arr.data.list))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '开料excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              TA033: item.TA033,
              TA026: item.TA026,
              TA027: item.TA027,
              TA028: item.TA028,
              TA001: item.TA001,
              TA002: item.TA002,
              TA003: item.TA003,
              TA077: item.TA077,
              MB002: item.MB002,
              MB003: item.MB003,
              TA015: item.TA015,
              TA017: item.TA017,
              TA006: item.TA006,
              TB012: item.TB012,
              TB013: item.TB013,
              UDF51: item.UDF51,
              UDF52: item.UDF52,
              MW002: item.MW002,
              TB003: item.TB003,
              TB004: item.TB004,
              TA011: item.TA011 == '1'?'未生产':item.TA011 == '2'?'已领料':item.TA011 == '3'?'生产中':'',
              UDF03: item.UDF03,
              MB110: item.MB110,
              MF003: item.MF003,
              MF004: item.MF004,
              TA0767778: item.TA076 + '-' + item.TA077 + '-' + item.TA078,
            }
            arr1.push(obj)
          })
          return arr1
        },
        //初始默认执行(重点)，返回日期格式YYYY-MM-DD HH:MM:SS
        getNowTime() {
            let dateTime = +new Date()+8*3600*1000
            const start = new Date(dateTime - 3600 * 1000 * 24 * 7)
                .toISOString()
                .replace('T', ' ')
                .split('.')[0] //默认开始时间7天前
            const end = new Date(dateTime)
                .toISOString()
                .replace('T', ' ')
                .split('.')[0]//默认结束时间当前时间
            console.log([start, end])
            return [start, end]
        },
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

</style>